<template>
  <!-- <headNav /> -->
  <div class="container">
    <div class="main">
      <div class="head-content">
        <!-- 面包屑导航 -->
        <div class="crumb">
          <a href="#" class="crumb-item">深圳美团</a>
          <a href="#" class="crumb-item">深圳休闲娱乐</a>
          <a href="#" class="crumb-item">深圳密室/沉浸互动剧</a>
        </div>
        <!-- 详情 -->
        <div class="poi-detail">
          <div class="detail">
            <div class="detail-left">
              <h1 class="seller-name">{{ $route.query.name }}</h1>
              <div class="row">
                <div class="rate-stars">
                  <ul class="stars-light stars">
                    <li>
                      <i class="iconfont icon-xingxing xingxing-light"></i>
                    </li>
                    <li>
                      <i class="iconfont icon-xingxing xingxing-light"></i>
                    </li>
                    <li>
                      <i class="iconfont icon-xingxing xingxing-light"></i>
                    </li>
                    <li>
                      <i class="iconfont icon-xingxing xingxing-light"></i>
                    </li>
                    <li>
                      <i class="iconfont icon-xingxing xingxing-dark"></i>
                    </li>
                  </ul>
                </div>
                <span class="score">4.2分 <span>人均￥89</span></span>
                <div class="share-seller">
                  <a class="share-icon"
                    ><i class="iconfont icon-fenxiang"></i>分享到微信</a
                  >
                </div>
              </div>
              <hr />
              <div class="seller-body">
                <div class="seller-body-item">
                  <span>地址：</span>
                  <span
                    ><a>
                      南山区桂庙路22号向南瑞峰B区2楼2083（近地铁11号线南山站E2出口）</a
                    >
                    <i class="iconfont icon-dingwei"></i>
                  </span>
                </div>
                <div class="seller-body-item">
                  <span>电话：</span>
                  <span>18033443023/13603057791</span>
                </div>
                <div class="seller-body-item">
                  <span>营业时间：</span>
                  <span>
                    周一至周日 09:00-24:00 2022-11-11至2022-11-12 休息</span
                  >
                </div>
                <hr />
                <div class="support">
                  <div class="service">
                    <i class="iconfont icon-WIFI"></i>
                    <br />
                    <span>提供WiFi</span>
                  </div>
                  <div class="service">
                    <i class="iconfont icon-park"></i>
                    <br />
                    <span>停车位</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="detail-right">
              <!-- Swiper -->
              <div class="swiper-container-big">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img
                      src="	https://p0.meituan.net/ugcpic/0ee34038cb7ab0703f9ef17d23050725@423w_237h_1e_1c"
                    />
                  </div>
                  <div class="swiper-slide">Slide 2</div>
                  <div class="swiper-slide">Slide 3</div>
                  <div class="swiper-slide">Slide 4</div>
                  <div class="swiper-slide">Slide 5</div>
                  <div class="swiper-slide">Slide 6</div>
                  <div class="swiper-slide">Slide 7</div>
                  <div class="swiper-slide">Slide 8</div>
                  <div class="swiper-slide">Slide 9</div>
                  <div class="swiper-slide">Slide 10</div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商家优惠促销 -->
      <div class="center-content">
        <div class="left-content">
          <div class="left-content-wrap">
            <div class="poi-group">
              <div class="sale">
                <p class="cheap-sale">商家优惠促销</p>
                <div class="set-meal">
                  <p class="set-meal-title">5款套餐</p>
                  <ul>
                    <li class="set-meal-item">
                      <div class="set-meal-detail">
                        <div class="img-wrapper">
                          <img
                            class="image"
                            src="https://p0.meituan.net/dpdeal/89f8ea9277cd135e502ba4aaff5062f5548311.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info">
                          <a class="info-title">
                            <span
                              >密室逃脱单人券（聚会、团建、亲子活动精选）</span
                            >
                            <img
                              src="./images/a1273fa7f0ca5c4558ceccd515d448f.png"
                              class="team"
                            />
                          </a>
                          <div class="info-about">
                            <span class="sold-num">已售3282</span>
                            <span class="sole-date"
                              >截止日期:2023年01月27日</span
                            >
                          </div>
                          <div class="info-price">
                            <span class="price-symbol">￥</span>
                            <span class="price-num">78</span>
                            <span class="market-price">门店价120</span>
                          </div>
                        </div>
                      </div>
                      <div class="pay">
                        <span class="pay-btn">立即抢购</span>
                      </div>
                    </li>
                    <li class="set-meal-item">
                      <div class="set-meal-detail">
                        <div class="img-wrapper">
                          <img
                            class="image"
                            src="https://p0.meituan.net/dpdeal/3fbd817d106750968e155f48d97cb260648461.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info">
                          <a class="info-title">
                            <span
                              >【古牢逃生】古风穿越悬疑（场景逼真、代入感强）</span
                            >
                            <img
                              src="./images/a1273fa7f0ca5c4558ceccd515d448f.png"
                              class="team"
                            />
                          </a>
                          <div class="info-about">
                            <span class="sold-num">已售73</span>
                            <span class="sole-date"
                              >截止日期:2023年01月27日</span
                            >
                          </div>
                          <div class="info-price">
                            <span class="price-symbol">￥</span>
                            <span class="price-num">98</span>
                            <span class="market-price">门店价120</span>
                          </div>
                        </div>
                      </div>
                      <div class="pay">
                        <span class="pay-btn">立即抢购</span>
                      </div>
                    </li>
                    <li class="set-meal-item">
                      <div class="set-meal-detail">
                        <div class="img-wrapper">
                          <img
                            class="image"
                            src="https://p0.meituan.net/dpmerchantpic/5b37bb90dd9512179a6311e71146e298188400.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info">
                          <a class="info-title">
                            <span>【画室疑云】谜题精彩 环环相扣 全机关</span>
                            <img
                              src="./images/a1273fa7f0ca5c4558ceccd515d448f.png"
                              class="team"
                            />
                          </a>
                          <div class="info-about">
                            <span class="sold-num">已售73</span>
                            <span class="sole-date"
                              >截止日期:2023年01月27日</span
                            >
                          </div>
                          <div class="info-price">
                            <span class="price-symbol">￥</span>
                            <span class="price-num">78</span>
                            <span class="market-price">门店价120</span>
                          </div>
                        </div>
                      </div>
                      <div class="pay">
                        <span class="pay-btn">立即抢购</span>
                      </div>
                    </li>
                  </ul>
                  <p class="set-meal-btn">
                    <span>更多2套餐</span>
                    <span class="iconfont icon-xiala"></span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 其他优惠 -->
            <div class="discount">
              <section class="book-desc">
                <p class="other-discount">其他优惠</p>
                <ul>
                  <li class="book-item">
                    <span class="book-title">预定优惠</span>
                    <div class="book-item-content">
                      <span class="tip">提前预订享优惠，不用排队更方便!</span>
                      <span class="book-num">已有45179人预订</span>
                      <span class="pay-btn">立即预订</span>
                    </div>
                  </li>
                </ul>
              </section>
            </div>
            <!-- 网友评论 -->
            <div class="comment-container">
              <div class="comment">
                <div class="comment-title-bar">
                  <span class="net-comment">网友评论</span>
                  <div class="sort">
                    <span class="active">默认排序</span>
                    <span>时间排序</span>
                  </div>
                </div>
                <div class="comment-box">
                  <div class="labels-box">
                    <div
                      v-for="(commentTag, index) in commentTagDTOList"
                      :key="commentTag.id"
                      :class="{ labelActive: defaultIndex === index }"
                      @click="changeIndex(index)"
                    >
                      {{ commentTag.tag }}({{ commentTag.count }})
                    </div>
                  </div>
                  <div class="comment-options">
                    <label>
                      <span></span>
                      <span class="des-text">只看有图片的评论</span>
                    </label>
                    <label>
                      <span></span>
                      <span class="des-text">只看低分</span>
                    </label>
                  </div>
                  <div class="comment-main">
                    <div
                      class="comment-item"
                      v-for="comment1 in commentDTOList"
                      :key="comment1.id"
                    >
                      <div class="comment-item-head">
                        <div class="user-photo">
                          <img
                            :src="[
                              comment1.userUrl
                                ? comment1.userUrl
                                : 'https://img.meituan.net/avatar/a7fc2c3b3140afb6f058c7326848b1c214937.jpg   ',
                            ]"
                            alt=""
                          />
                        </div>
                        <div class="user-info">
                          <div class="user-name">
                            <span> {{ comment1.userName }} </span>
                            <img
                              src="./images/8ee696edb25cb79f12de9cd3f55d6d0.jpg"
                              class="level"
                            />
                          </div>
                          <div class="comment-info">
                            <span class="comment-score">
                              <ul class="stars-light stars">
                                <li>
                                  <i
                                    class="iconfont icon-xingxing xingxing-light"
                                  ></i>
                                </li>
                                <li>
                                  <i
                                    class="iconfont icon-xingxing xingxing-light"
                                  ></i>
                                </li>
                                <li>
                                  <i
                                    class="iconfont icon-xingxing xingxing-light"
                                  ></i>
                                </li>
                                <li>
                                  <i
                                    class="iconfont icon-xingxing xingxing-light"
                                  ></i>
                                </li>
                                <li>
                                  <i
                                    class="iconfont icon-xingxing xingxing-dark"
                                  ></i>
                                </li>
                              </ul>
                            </span>
                            <a href="" target="_blank" class="comment-date">
                              {{ comment1.commentTime }}
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="comment-item-content">
                        <div class="user-comment-inner">
                          {{ comment1.comment }}
                        </div>
                        <div class="comment-photo">
                          <div class="comment-photo-list">
                            <div
                              class="comment-photo-box"
                              v-for="(item, index) in comment1.picUrls"
                              :key="index"
                            >
                              <img :src="item" />
                            </div>
                            <div></div>
                            <div></div>
                          </div>
                        </div>
                        <div class="user-like">
                          <div class="like-btn">
                            <span class="iconfont icon-dianzan"></span>
                            <span class="op-txt">赞（0）</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <nav class="pagination">
                    <div class="pagination-item">
                      <button>&lt;</button>
                      <button class="select">1</button>
                      <button>···</button>

                      <button>3</button>
                      <button>4</button>
                      <button>5</button>
                      <button>6</button>
                      <button>7</button>

                      <button>···</button>
                      <button>142</button>
                      <button>&gt;</button>
                    </div>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-content">
          <div class="right-content-wrap">
            <BMap />
            <div class="guess-like">
              <div class="recommend-box">
                <div class="top-box">
                  <div class="label">猜你喜欢</div>
                </div>
                <div class="recommend-list">
                  <a class="recommend-item" target="_blank">
                    <div class="card-container">
                      <div class="recommend-card-wrapper">
                        <div class="img-box">
                          <img
                            src="https://p0.meituan.net/merchant/2fac9b5408644373231e179ce8872ed462429.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info-box">
                          <div class="info-name title">愿者上钩（大浪店）</div>
                          <div class="score-line">
                            <div class="score score-item">
                              <div class="rate-stars">
                                <ul class="stars-light stars">
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-dark"
                                    ></i>
                                  </li>
                                </ul>
                              </div>
                              <div class="comment-number">3213个评价</div>
                            </div>
                          </div>
                          <div class="desc-line">
                            <div class="desc">大浪</div>
                          </div>
                          <div class="bottom-line">
                            <div class="price-box">
                              <span class="yuan">￥</span>
                              <span class="price-number">98</span>
                              <span class="price-desc">起</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                  <a class="recommend-item" target="_blank">
                    <div class="card-container">
                      <div class="recommend-card-wrapper">
                        <div class="img-box">
                          <img
                            src="	https://p0.meituan.net/biztone/676649268_1667790593620.jpeg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info-box">
                          <div class="info-name title">愿者上钩（大浪店）</div>
                          <div class="score-line">
                            <div class="score score-item">
                              <div class="rate-stars">
                                <ul class="stars-light stars">
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-dark"
                                    ></i>
                                  </li>
                                </ul>
                              </div>
                              <div class="comment-number">3213个评价</div>
                            </div>
                          </div>
                          <div class="desc-line">
                            <div class="desc">大浪</div>
                          </div>
                          <div class="bottom-line">
                            <div class="price-box">
                              <span class="yuan">￥</span>
                              <span class="price-number">98</span>
                              <span class="price-desc">起</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                  <a class="recommend-item" target="_blank">
                    <div class="card-container">
                      <div class="recommend-card-wrapper">
                        <div class="img-box">
                          <img
                            src="https://p0.meituan.net/dpmerchantpic/18244f1845b66297992cfffcc09a72bf253738.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info-box">
                          <div class="info-name title">愿者上钩（大浪店）</div>
                          <div class="score-line">
                            <div class="score score-item">
                              <div class="rate-stars">
                                <ul class="stars-light stars">
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-dark"
                                    ></i>
                                  </li>
                                </ul>
                              </div>
                              <div class="comment-number">3213个评价</div>
                            </div>
                          </div>
                          <div class="desc-line">
                            <div class="desc">大浪</div>
                          </div>
                          <div class="bottom-line">
                            <div class="price-box">
                              <span class="yuan">￥</span>
                              <span class="price-number">98</span>
                              <span class="price-desc">起</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                  <a class="recommend-item" target="_blank">
                    <div class="card-container">
                      <div class="recommend-card-wrapper">
                        <div class="img-box">
                          <img
                            src="https://p0.meituan.net/dpmerchantpic/3f2c92cc32f09eb975b0391114ba6c04120929.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info-box">
                          <div class="info-name title">愿者上钩（大浪店）</div>
                          <div class="score-line">
                            <div class="score score-item">
                              <div class="rate-stars">
                                <ul class="stars-light stars">
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-dark"
                                    ></i>
                                  </li>
                                </ul>
                              </div>
                              <div class="comment-number">3213个评价</div>
                            </div>
                          </div>
                          <div class="desc-line">
                            <div class="desc">大浪</div>
                          </div>
                          <div class="bottom-line">
                            <div class="price-box">
                              <span class="yuan">￥</span>
                              <span class="price-number">98</span>
                              <span class="price-desc">起</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                  <a class="recommend-item" target="_blank">
                    <div class="card-container">
                      <div class="recommend-card-wrapper">
                        <div class="img-box">
                          <img
                            src="https://p0.meituan.net/shaitu/c6ce54326702ba60bfb6f0df733ffe0e1101034.jpg@380w_212h_1e_1c"
                          />
                        </div>
                        <div class="info-box">
                          <div class="info-name title">愿者上钩（大浪店）</div>
                          <div class="score-line">
                            <div class="score score-item">
                              <div class="rate-stars">
                                <ul class="stars-light stars">
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-light"
                                    ></i>
                                  </li>
                                  <li>
                                    <i
                                      class="iconfont icon-xingxing xingxing-dark"
                                    ></i>
                                  </li>
                                </ul>
                              </div>
                              <div class="comment-number">3213个评价</div>
                            </div>
                          </div>
                          <div class="desc-line">
                            <div class="desc">大浪</div>
                          </div>
                          <div class="bottom-line">
                            <div class="price-box">
                              <span class="yuan">￥</span>
                              <span class="price-number">98</span>
                              <span class="price-desc">起</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 附近商家 -->
      <div class="nearby-merchants">
        <div class="nearby-box">
          <div class="nearby-label">附近商家</div>
          <div class="nearby-merchants-list">
            <a class="merchants-item" v-for="near in nearByList" :key="near.id">
              <div class="card-wrapper">
                <div class="card-img">
                  <img :src="near.imgUrl" />
                </div>
                <div class="card-info">
                  <div class="card-info-name">
                    {{ near.name }}
                  </div>
                  <div class="card-address">
                    {{ near.address }}
                  </div>
                  <div class="card-bottom">
                    <div class="card-price">
                      <span class="yuan">￥</span>
                      <span class="price-number">{{ near.lowestPrice }}</span>
                      <span class="price-desc">起</span>
                    </div>
                    <div class="card-number">已售{{ near.saleNum }}</div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <FooterNav /> -->
  <Footer />
</template>

<script>
export default {
  name: "Like",
};
</script>

<script setup>
// import headNav from "../../components/headNav";
// import headNav from "../../components/header/index.vue";
import Footer from "../../components/footer/index.vue";
// import FooterNav from "../home/components/footerNav/index.vue";
import BMap from "./components/b-map.vue";
import { ref, onMounted } from "vue";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { getNearbyApi, getCommendApi } from "../../api/like/likeDetail";

let MySwiper = new Swiper(".swiper-container-big", {
  autoplay: true,
  autoplay: {
    delay: 1000,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

const defaultIndex = ref(0);
const changeIndex = (index) => {
  defaultIndex.value = index;
};

const nearByList = ref([]);
onMounted(async () => {
  const data = await getNearbyApi({
    poiId: 96256935,
    start: 0,
    limit: 10,
  });
  nearByList.value = data.data.nearPoiList;
});
const commentTagDTOList = ref([]);
const commentDTOList = ref([]);

onMounted(async () => {
  const res = await getCommendApi({
    poiId: 96256935,
    offset: 0,
    pageSize: 10,
  });
  commentTagDTOList.value = res.data.commentTagDTOList;
  commentDTOList.value = res.data.commentDTOList;
});
</script>

<style scoped>
/* .swiper-container-big {
  position: absolute;
  top:120px;
  right: 20px;
} */
.pagination-item .select {
  border: 1px solid #ffd000;
  background-image: linear-gradient(135deg, #ffd000 0, #ffbd00 100%);
  cursor: default;
}
.icon-weixin {
  width: 20px;
  height: 20px;
}
.stop {
  height: 30px;
  width: 30px;
}
.level {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  vertical-align: middle;
}
.team {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 10px;
}
.pagination-item:first-child .pagination-item:last-child {
  text-align: center;
}
.pagination-item {
  position: absolute;
  left: 13%;
}
.card-number {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
.nearby-merchants-list a {
  display: inline-block;
}
.card-price {
  color: #f60;
}
.card-bottom {
  height: 26px;
  margin-top: 4px;
  position: relative;
}
.card-address {
  font-size: 12px;
  color: #999;
  width: 100%;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
}
.card-info-name {
  font-size: 16px;
  color: #222;
  line-height: 22px;
  width: 100%;
  height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 500;
}
.card-info {
  position: relative;
  margin-top: 10px;
}
.card-img img {
  width: 213.6px;
  height: 105.8px;
}
.card-img {
  width: 100%;
  background-color: #f4f4f4;
  border-radius: 4px;
  overflow: hidden;
}
.card-wrapper {
  width: 100%;
}
.merchants-item {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  width: 20%;
  box-sizing: border-box;
  vertical-align: middle;
}
.nearby-merchants-list {
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  max-height: 472px;
  padding: 20px 10px 0;
  width: 100%;
  overflow-y: hidden;
}
.nearby-label {
  font-size: 20px;
  color: #222;
  line-height: 26px;
  margin-bottom: 10px;
  font-weight: 500;
}
.nearby-box {
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
}
.price-desc {
  font-size: 12px;
  margin-left: 4px;
  font-weight: 700;
}
.price-number {
  font-size: 22px;
}
.yuan {
  font-size: 14px;
  font-weight: 700;
}
.price-box span {
  color: #ff6600;
}
.desc {
  height: 18px;
  font-size: 12px;
  color: #999999;
  width: 100%;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}
.score-line {
  width: 190px;
  height: 26.06px;
}
.comment-number {
  font-size: 12px;
  color: #999;
  height: 24px;
  line-height: 24px;
  margin-left: 10px;
  display: inline-block;
}
.info-name {
  font-size: 14px;
  color: #222;
  line-height: 20px;
  width: 100%;
  margin: 0;
  font-weight: 500;
}
.info-box {
  position: relative;
  margin-top: 10px;
}
.img-box img {
  width: 196px;
  height: 106px;
}
.img-box {
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
  background-color: #f4f4f4;
  border-radius: 4px;
  overflow: hidden;
}
.recommend-card-wrapper {
  width: 100%;
  box-sizing: border-box;
}
.recommend-item {
  width: 190px;
  margin-bottom: 20px;
}
.top-box .label {
  font-size: 16px;
  color: #333;
  line-height: 22px;
  font-weight: 500;
}
.recommend-box {
  margin-top: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  width: 230px;
  background-color: #fff;
  padding: 16px 20px 0;
  box-sizing: border-box;
}
.center-content {
  display: flex;
  justify-content: space-between;
}
.right-content {
  width: 230px;
  margin-left: 10px;
  padding-top: 76px;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.detail-right {
  height: 214px;
  width: 383px;
  border-radius: 4px;
  position: absolute;
  right: 20px;
  top: 20px;
}
.swiper-container {
  width: 100%;
  height: 100%;
  right: -30px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.pagination button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  float: left;
  margin: 0 10px;
  font-size: 16px;
  color: #999;
}
.pagination {
  text-align: center;
  height: 41.99px;
  position: relative;
}
.op-txt {
  color: #666;
  cursor: pointer;
}
.icon-dianzan {
  width: 24px;
  height: 24px;
}
.like-btn {
  font-size: 12px;
  color: #666;
  display: flex;
  cursor: pointer;
  overflow: hidden;
  align-items: center;
  float: right;
}
.user-like {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.comment-photo-box img {
  width: 140px;
  height: 140px;
  margin: 10px;
  background-color: #f4f4f4;
}
.comment-photo-box {
  width: 160px;
  height: 160px;
  display: inline-block;
}
.comment-photo {
  padding: 7px 0 0;
  overflow: hidden;
  margin-bottom: 10px;
}
.user-comment-inner {
  font-size: 14px;
  color: #666;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.comment-item-content {
  width: 830px;
  height: auto;
  margin-top: 13px;
  float: right;
  padding-bottom: 15.5px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
}
.comment-score {
  width: 90px;
  display: inline-block;
  margin-top: -8px;
  margin-left: -2.5px;
  margin-right: 13.7px;
}
.comment-date {
  height: 17px;
  font-size: 12px;
  color: #999;
  float: right;
}
.comment-info {
  width: 100%;
  height: 16px;
  line-height: 16px;
}
.user-level {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
  background: url("…+xC4XMrDTHBcCsGx8wLf/Bw7amrk51bCfAAAAAElFTkSuQmCC")
    no-repeat;
}
.user-name span {
  font-size: 16px;
  color: #222;
  font-weight: 400;
  vertical-align: middle;
}
.user-name {
  width: auto;
  height: 22px;
  padding-top: 0;
}

.user-photo img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  float: left;
  border: none;
  border-radius: 50%;
}
.comment-item-head {
  width: 100%;
  height: 60px;
}
.comment-item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
.comment-main {
  width: 100%;
  height: auto;
  margin-top: 30px;
}

.des-text {
  height: 100%;
}
.comment-options label span {
  margin-right: 4px;
}
.comment-options label {
  height: 20px;
  font-size: 14px;
  color: #666;
}
.comment-options {
  width: 100%;
  margin: 10px 0;
}
.labels-box .labelActive {
  height: 22px;
  color: #222;
  background-color: #fffbf5;
  border: 1px solid #ffc700;
}
.labels-box div {
  height: 20px;
  float: left;
  padding: 8px 10px;
  font-size: 14px;
  color: #666;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.labels-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.sort span:last-child {
  margin-right: 0;
}

.sort .active {
  color: #222;
}
.sort {
  width: 120px;
  display: inline-flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  cursor: pointer;
  padding-top: 10px;
  margin-right: 20px;
}
.net-comment {
  font-size: 20px;
  font-weight: 500;
  color: #222;
}
.comment-title-bar {
  width: 100%;
  height: 26px;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
}
.comment-box {
  width: 100%;
  height: auto;
  padding: 15px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.comment {
  width: 950px;
  height: auto;
  margin-top: 34px;
}
.book-item-content .pay-btn {
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  padding: 10px 32px;
  background-color: #f90;
  border: none;
  cursor: pointer;
  border-radius: 100px;
}
.book-num {
  margin-right: 30px;
}
.tip {
  flex: 1;
  margin-left: 17px;
}
.book-item-content span {
  display: block;
  line-height: 40px;
}

.book-item-content {
  display: flex;
  color: #838383;
  font-size: 12px;
}
.book-title {
  margin-left: 10px;
  font-size: 18px;
  color: #333333;
}
.book-title::before {
  content: ".";
  width: 10.67px;
  height: 38px;
}
.book-desc ul li {
  display: block;
  list-style-type: disc;
}
.other-discount {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 26px;
}
.book-desc {
  width: 100%;
  height: auto;
  padding: 15px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.set-meal-btn {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}
.pay .pay-btn {
  position: absolute;
  right: 0;
  bottom: 50px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  padding: 10px 32px;
  background-color: #f90;
  border: none;
  cursor: pointer;
  border-radius: 100px;
}

.market-price {
  font-size: 12px;
  color: #999;
}
.price-num {
  font-size: 30px;
  color: #f60;
  margin-right: 10px;
}
.price-symbol {
  font-size: 14px;
  color: #f60;
  font-weight: 500;
}
.info-about {
  font-size: 12px;
  color: #666;
  height: 17px;
  line-height: 17px;
  margin-bottom: 22px;
  margin-top: 5px;
}
.info-title {
  font-size: 16px;
  color: #222;
  font-weight: 500;
}
.info {
  position: absolute;
  top: 0;
  left: 120px;
}
.set-meal-detail {
  position: relative;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
}
.img-wrapper {
  width: 100px;
  height: 100px;
}
.set-meal-item {
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 0;
  position: relative;
}
.cheap-sale {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  width: 100%;
  height: 26px;
  padding: 8px 0;
  overflow: hidden;
}
.set-meal-title {
  font-size: 16px;
  color: #333;
  line-height: 26px;
  font-weight: 500;
}
.set-meal {
  background-color: #fff;
  padding: 20px 20px 0;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
}
.icon-dingwei {
  color: #ffd000;
}
.left-content {
  width: 950px;
  margin-top: 34px;
}
.service .icon {
  width: 30px;
  height: 30px;
  background-color: rgb(229, 229, 229);
}
.share-icon {
  position: relative;
}
.xingxing-dark {
  color: #c3c3c3;
}
.xingxing-light {
  color: #ff9900;
}
.stars {
  display: flex;
}
.service {
  text-align: center;
  margin: 18px 15px 0;
  height: 50px;
}
.service span {
  font-size: 12px;
  color: #666;
}
.support {
  display: flex;
}
hr {
  color: #e5e5e5;
  background-color: #e5e5e5;
  height: 1px;
  line-height: 1px;
  font-size: 0;
  border: none;
}
.seller-body-item {
  font-size: 14px;
  color: #666;
  padding: 7px 0;
}
.seller-body {
  padding: 10px 0;
}
.share-seller a {
  color: #666;
  font-size: 12px;
  margin-left: 10px;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 5px;
}

.score {
  font-size: 14px;
  color: #666;
  padding-left: 6px;
  display: flex;
}
.row {
  margin: 5px 0 12px;
  position: relative;
}
.rate-stars {
  width: 84px;
  height: 24px;
  margin-top: 3px;
}
.container {
  background-color: #f8f8f8;
}
.main {
  width: 1190px;
  margin-top: 10px;
  padding: 0 auto;
}
.crumb {
  margin: 20px 0;
}
.crumb-item {
  color: #222;
  text-decoration: none;
  font-size: 12px;
  margin-right: 14px;
}
.crumb-item::after {
  content: " >";
}
.poi-detail {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 5px 14px 0 rgb(0 0 0 / 10%);
  padding: 20px;
}
.detail {
  display: flex;
  position: relative;
}
.detail-left {
  width: 680px;
  margin-left: 30px;
  text-align: left;
}
.seller-name {
  font-size: 26px;
  color: #222;
  font-weight: 500;
}
</style>
